<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
%>
<%@taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>图文素材模板</title>
  <link href="<%=path%>/css/material/mobilePreviewStyle.css" rel="stylesheet">
  <script src="<%=path%>/js/aem/material-preview.js"></script>
</head>
<body>
  <div class="content-wrap" id="content-wrap" style="padding:3%">
    <!-- 活动内容，后端提供 -->
  </div>
  <div class="tmpt-wrap">
    <!-- department info -->
    <div class="department">
      <div class="department-index intent">
                                       参与门店
              <img class="intent" src="<%=path%>/images/aem/shop.png" />
      </div>
      <%-- <div class="info">
        <p id="storeName" class="name">叮当智慧药房</p>
        <!-- <p class="name">叮当智慧药房<span>2.6km</span></p> -->
        <p class="address">
          <img class="address-icon" src="<%=path%>/images/aem/address-icon.png">
          <span id="storeAddress" class="text">北京市大兴区马泉营路888号3层</span>
          <a class="phone-icon" >
            <img class="phone-icon" src="<%=path%>/images/aem/phone-icon.png">
          </a>
        </p>
        <p  class="show-other">
                                 查看全部<span id="storeNum">0</span>家分店<img class="next-icon" src="<%=path%>/images/aem/next-icon.png">
        </p>
      </div> --%>
    </div>
    <!-- input-info -->
    <div class="form">
      <div class="item">
        <p class="label-wrap"><span class="check-icon">*</span><span class="text">姓名</span></p>
        <input class="input" type="text">
      </div>
      <div class="item">
        <p class="label-wrap"><span class="check-icon">*</span><span class="text">手机</span></p>
        <input class="input" type="text">
      </div>
      <div class="btn submit">提交</div>
    </div>
    <!-- qrcode-info -->
    <div class="qrcode-wrap">
      <img id="qrcode" style="width: 90px;height: 90px">
      <p class="text" id="qrcodeText" style="font-size: 16px;"></p>
    </div>
  </div>

  <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.qrcode/1.0/jquery.qrcode.min.js"></script>
  <script type="text/javascript" src="<%=path%>/js/marketing/dialog.js"></script>
  <script type="text/javascript" src="<%=path%>/js/marketing/public.js"></script>

  <script>


	var aemInfoHtmlPath="";
	var aemInfoVirPath="";
	var cid =null;
    var buttonSumitText = "提交";
    function toDepartList() {
      window.location.href = 'department.html';
    }
    //预览id
    var previewId = 0;
    //素材id
    var materialId = 0;
    $(function(){
    	previewId = getQueryString("id"); 
    	materialId = getQueryString("materialId"); 
    	cid = getQueryString("cid"); 
    	console.log(previewId);
    	if(StringEmpty(materialId)){
    		getMaterialInfo();
    	}
    	
    	if(StringEmpty(previewId)){
    		getMaterialPerviewInfo();
    	}
    });
    
    function getMaterialInfo(){
    	var url="<%=path%>/material/ajaxGetMaterialDetail";
    	$.post(url, {
            "id": materialId,
            "cid": cid,
        }, function (data) {
            if (data.status == "200") {
            	initView(data.data);
            } else {
            	errorDialog(data.message);
            }
        });
    }
    
    function getMaterialPerviewInfo(){
    	var url="<%=path%>/material/ajaxGetMaterialPreviewInfo";
    	$.post(url, {
            "previewId": previewId,
        }, function (data) {
            if (data.status == "200") {
            	initView(data.data);
            } else {
            	errorDialog(data.message);
            }
        });
    }
    
    function initView(materialInfo){
    	$('#content-wrap').html(materialInfo.content);
        //初始化原始editor中的数据图片。压缩宽度到100%，高度自动
        $(".content-wrap").find('img').css("max-width", "100%");
        $(".content-wrap").find('img').css("height", "auto");
        $(".content-wrap").find('video').css("max-width", "100%");
        $(".content-wrap").find('video').css("height", "auto");
        // $("#content-wrap").find('img').css("width","100%");
		// $("#content-wrap").find('img').css("height","");
		$("title").html(materialInfo.name);
    	var storeIds = materialInfo.storeIds;
    	cid = materialInfo.cid;
    	if(StringEmpty(storeIds)){
    		ajaxGetAemFgDomainInfo();
    		getStoreList(storeIds);
    	}else{
    		$('.department-index').hide();
    	}
    	if(StringEmpty(materialInfo.successPageId)){
    		getSuccessPageInfo(materialInfo.successPageId);
    	}else{
    		$('#qrcode').hide();
    	}
    	buttonSumitText = materialInfo.buttonSumitText;
    	buttonSubmitColor = materialInfo.buttonSubmitColor;
    	
    	var isNeedCollect = materialInfo.isNeedCollect;
    	if(isNeedCollect == 1){
    		if(StringEmpty(materialInfo.id)){
        		getCollectInfo(materialInfo.id);
        	}
    	}else{
    		$('.form').hide();
    	}
    }
    
    function getCollectInfo(id){
    	var url="<%=path%>/material/ajaxListCollectField";
    	$.post(url, {
            "mgiId": id,
            "cid":cid,
        }, function (data) {
            if (data.status == "200") {
            	intCollectView(data.data);
            } else{
            	if(StringEmpty(buttonSumitText)){
            		$('.submit').html(buttonSumitText);
            	}
            }
        });
    }
    
    function intCollectView(collectInfo){
    	var html="";
    	for(var i in collectInfo){
    		html += '<div class="item">';
    		html += '<p class="label-wrap">';
    		if(collectInfo[i].required == 1){
    			html += '<span class="check-icon">*</span>';
    		}
    		html += '<span class="text">'+collectInfo[i].fieldName+'</span></p>';
    		html += '<input class="input" type="text"></div>';
    		
    		if(collectInfo[i].needVerify == 1){
    			html += '<div class="item">';
    			html += '<p class="label-wrap"></p>';
    			html += '<input class="input phone-code" type="text" placeholder="请输入验证码"><div class="btn send-code">发送验证码</div>';
    			html += '</div>';
    		}
    	}
    	if(StringEmpty(buttonSumitText)){
    		if(StringEmpty(buttonSubmitColor) && buttonSubmitColor != '#000000'){
    			html += '<div class="btn submit" style="background-color:'+buttonSubmitColor+'">'+buttonSumitText+'</div>';
    		}else{
    			html += '<div class="btn submit">'+buttonSumitText+'</div>';
    		}
    		
    	}else{
    		html += '<div class="btn submit">提交</div>';
    	}
    	
    	$('.form').html(html);
    }
    
    function getStoreList(storeIds){
    	var url="<%=path%>/store/findListByDto";
    	$.post(url, {
            "ids": storeIds,
        }, function (data) {
            if (data.status == "200") {
            	var storeList = data.data;
            	var html='';
            } else {
            	$('.info').hide();
            }
        });
    }
    /* 获取成功页 */
    function getSuccessPageInfo(successPageId){
    	var url="<%=path%>/material/ajaxGetMaterialSuccessPageDetail";
    	$.post(url, {
            "id": successPageId,
            "cid":cid,
        }, function (data) {
            if (data.status == "200") {
            	var qrcodeImg = data.data.qrcodePic;
            	var qrcodeText = data.data.qrcodeText;
            	var isShowQrcode = data.data.isShowQrcode;
            	if(isShowQrcode == 0){
            		$('#qrcode').hide();
            		return ;
            	}
            	$('#qrcode').attr("src",qrcodeImg);
                $('#qrcodeText').html(qrcodeText);
            	/*console.log("text:qrcodeImg----->"+qrcodeImg)
            	jQuery('.qrcodeImg').qrcode({
                    render: "canvas", //也可以替换为table
                    width: 90,
                    height: 90,
                    text:qrcodeImg/!*可以通过ajax请求动态设置*!/

                });
        		var mycanvas1=document.getElementsByTagName('canvas')[0];
        		//将转换后的img标签插入到html中
        	    var image = new Image();
        	    image.src = mycanvas1.toDataURL("image/png");
        	    $('#qrcode').append(image);//imagQrDiv表示你要插入的容器id
        	    console.log("image--------->"+image);
        	    $('#qrcodeText').html(qrcodeText);*/
            } else {
            	$('#qrcode').hide();
            }
        });
    }
    
    /* 获取h5前端服务的域名*/
   function ajaxGetAemFgDomainInfo(){
	   var url="<%=path%>/material/ajaxGetAemFgDomainInfo";
   	   $.post(url, {
       }, function (data) {
           if (data.status == "200") {
        	    aemInfoHtmlPath=data.data.aemInfoHtmlPath;
        		aemInfoVirPath=data.data.aemInfoVirPath;
           }
       });
    }
    $('.intent').click(function(){
    	var url = aemInfoHtmlPath+"/department.html?cid="+cid+"&mgiId="+materialId+"&host="+encodeURI(aemInfoVirPath);
    	window.location.href=url;
    });
  </script>
</body>
</html>